<div id="header">
    <button class="navbar-toggler mobile-sidebar-toggler hidden-lg-up" type="button">☰</button>
    <a class="navbar-brand" href="#"></a>
    <ul class="nav navbar-nav hidden-md-down">
        <li class="nav-item">
            <a class="nav-link navbar-toggler sidebar-toggler" href="#">☰</a>
        </li>

        <li class="nav-item px-1">
            <a class="nav-link" href="#">工作台</a>
        </li>
        <li class="nav-item px-1">
            <a class="nav-link" href="#">设置</a>
        </li>
    </ul>
    <ul class="nav navbar-nav ml-auto">
        <li class="nav-item dropdown hidden-md-down">
            <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
               aria-expanded="false">
                <i class="icon-bell"></i>
                <span class="badge badge-pill badge-danger">5</span>
            </a>
            <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg">

                <div class="dropdown-header text-center">
                    <strong>You have 5 notifications</strong>
                </div>

                <a href="#" class="dropdown-item">
                    <i class="icon-user-follow text-success"></i> New user registered
                </a>
                <a href="#" class="dropdown-item">
                    <i class="icon-user-unfollow text-danger"></i> User deleted
                </a>
                <a href="#" class="dropdown-item">
                    <i class="icon-chart text-info"></i> Sales report is ready
                </a>
                <a href="#" class="dropdown-item">
                    <i class="icon-basket-loaded text-primary"></i> New client
                </a>
                <a href="#" class="dropdown-item">
                    <i class="icon-speedometer text-warning"></i> Server overloaded
                </a>

                <div class="dropdown-header text-center">
                    <strong>Server</strong>
                </div>

                <a href="#" class="dropdown-item">
                    <div class="text-uppercase mb-q">
                        <small><b>CPU Usage</b>
                        </small>
                    </div>
                    <span class="progress progress-xs">
                            <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25"
                                 aria-valuemin="0" aria-valuemax="100"></div>
                        </span>
                    <small class="text-muted">348 Processes. 1/4 Cores.</small>
                </a>
                <a href="#" class="dropdown-item">
                    <div class="text-uppercase mb-q">
                        <small><b>Memory Usage</b>
                        </small>
                    </div>
                    <span class="progress progress-xs">
                            <div class="progress-bar bg-warning" role="progressbar" style="width: 70%"
                                 aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
                        </span>
                    <small class="text-muted">11444GB/16384MB</small>
                </a>
                <a href="#" class="dropdown-item">
                    <div class="text-uppercase mb-q">
                        <small><b>SSD 1 Usage</b>
                        </small>
                    </div>
                    <span class="progress progress-xs">
                            <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95"
                                 aria-valuemin="0" aria-valuemax="100"></div>
                        </span>
                    <small class="text-muted">243GB/256GB</small>
                </a>

            </div>
        </li>
        <li class="nav-item dropdown hidden-md-down">
            <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
               aria-expanded="false">
                <i class="icon-list"></i>
                <span class="badge badge-pill badge-warning">15</span>
            </a>
            <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg">

                <div class="dropdown-header text-center">
                    <strong>You have 5 pending tasks</strong>
                </div>

                <a href="#" class="dropdown-item">
                    <div class="small mb-q">Upgrade NPM &amp; Bower
                        <span class="float-right">
                                <strong>0%</strong>
                            </span>
                    </div>
                    <span class="progress progress-xs">
                            <div class="progress-bar bg-info" role="progressbar" style="width: 0%" aria-valuenow="0"
                                 aria-valuemin="0" aria-valuemax="100"></div>
                        </span>
                </a>
                <a href="#" class="dropdown-item">
                    <div class="small mb-q">ReactJS Version
                        <span class="float-right">
                                <strong>25%</strong>
                            </span>
                    </div>
                    <span class="progress progress-xs">
                            <div class="progress-bar bg-danger" role="progressbar" style="width: 25%" aria-valuenow="25"
                                 aria-valuemin="0" aria-valuemax="100"></div>
                        </span>
                </a>
                <a href="#" class="dropdown-item">
                    <div class="small mb-q">VueJS Version
                        <span class="float-right">
                                <strong>50%</strong>
                            </span>
                    </div>
                    <span class="progress progress-xs">
                            <div class="progress-bar bg-warning" role="progressbar" style="width: 50%"
                                 aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                        </span>
                </a>
                <a href="#" class="dropdown-item">
                    <div class="small mb-q">Add new layouts
                        <span class="float-right">
                                <strong>75%</strong>
                            </span>
                    </div>
                    <span class="progress progress-xs">
                            <div class="progress-bar bg-info" role="progressbar" style="width: 75%" aria-valuenow="75"
                                 aria-valuemin="0" aria-valuemax="100"></div>
                        </span>
                </a>
                <a href="#" class="dropdown-item">
                    <div class="small mb-q">Angular 2 Cli Version
                        <span class="float-right">
                                <strong>100%</strong>
                            </span>
                    </div>
                    <span class="progress progress-xs">
                            <div class="progress-bar bg-success" role="progressbar" style="width: 100%"
                                 aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                        </span>
                </a>

                <a href="#" class="dropdown-item text-center">
                    <strong>View all tasks</strong>
                </a>
            </div>
        </li>
        <li class="nav-item dropdown hidden-md-down">
            <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
               aria-expanded="false">
                <i class="icon-envelope-letter"></i>
                <span class="badge badge-pill badge-info">7</span>
            </a>
            <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg">

                <div class="dropdown-header text-center">
                    <strong>You have 4 messages</strong>
                </div>

                <a href="#" class="dropdown-item">
                    <div class="message">
                        <div class="py-1 mr-1 float-left">
                            <div class="avatar">
                                <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
                                <span class="avatar-status badge-success"></span>
                            </div>
                        </div>
                        <div>
                            <small class="text-muted">John Doe</small>
                            <small class="text-muted float-right mt-q">Just now</small>
                        </div>
                        <div class="text-truncate font-weight-bold">
                            <span class="fa fa-exclamation text-danger"></span>Important message
                        </div>
                        <div class="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing
                            elit, sed do eiusmod tempor incididunt...
                        </div>
                    </div>
                </a>
                <a href="#" class="dropdown-item">
                    <div class="message">
                        <div class="py-1 mr-1 float-left">
                            <div class="avatar">
                                <img src="img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
                                <span class="avatar-status badge-warning"></span>
                            </div>
                        </div>
                        <div>
                            <small class="text-muted">John Doe</small>
                            <small class="text-muted float-right mt-q">5 minutes ago</small>
                        </div>
                        <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
                        <div class="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing
                            elit, sed do eiusmod tempor incididunt...
                        </div>
                    </div>
                </a>
                <a href="#" class="dropdown-item">
                    <div class="message">
                        <div class="py-1 mr-1 float-left">
                            <div class="avatar">
                                <img src="img/avatars/5.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
                                <span class="avatar-status badge-danger"></span>
                            </div>
                        </div>
                        <div>
                            <small class="text-muted">John Doe</small>
                            <small class="text-muted float-right mt-q">1:52 PM</small>
                        </div>
                        <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
                        <div class="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing
                            elit, sed do eiusmod tempor incididunt...
                        </div>
                    </div>
                </a>
                <a href="#" class="dropdown-item">
                    <div class="message">
                        <div class="py-1 mr-1 float-left">
                            <div class="avatar">
                                <img src="img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
                                <span class="avatar-status badge-info"></span>
                            </div>
                        </div>
                        <div>
                            <small class="text-muted">John Doe</small>
                            <small class="text-muted float-right mt-q">4:03 PM</small>
                        </div>
                        <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
                        <div class="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing
                            elit, sed do eiusmod tempor incididunt...
                        </div>
                    </div>
                </a>

                <a href="#" class="dropdown-item text-center">
                    <strong>View all messages</strong>
                </a>
            </div>
        </li>
        <li class="nav-item hidden-md-down">
            <a class="nav-link" href="#"><i class="icon-location-pin"></i></a>
        </li>
        <li class="nav-item dropdown hidden-md-down">
            <a class="nav-link dropdown-toggle nav-link" data-toggle="dropdown" href="#" role="button"
               aria-haspopup="true" aria-expanded="false">
                <img src="img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
                <span class="hidden-md-down" id="userid"></span>
            </a>
            <div class="dropdown-menu dropdown-menu-right">
                <a class="dropdown-item" onclick="logout()"><i class="fa fa-lock"></i> 退出</a>
            </div>
        </li>
        <li class="nav-item">
            <a class="nav-link navbar-toggler aside-menu-toggler" href="#">☰</a>
        </li>
    </ul>
</div>

<script>
    window.parent.postMessage(JSON.stringify({type: "header", data: document.getElementById("header").innerHTML}), "*");
</script>